<template>
  <div>
    <div class="header-btn">
      <el-radio-group v-model="queryInfo.collect" size="medium" @change="radioChange">
        <el-radio-button :label="false">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
      <el-button v-if="isShowAdd" size="mini" @click="dialogVisible=true" type="success">添加素材</el-button>
    </div>
    <el-row v-loading='imagloading'>
      <el-col :xs='12' :sm='8' :md='6' :lg='4' v-for="(img,index)  in imageList" :key="img.id">
        <div class="imgitem" @click="selected=index">
          <el-image :src='img.url' fit='cover'></el-image>
          <div v-if="isShowSelected&&selected===index" class="selected"></div>
          <div v-if="isShowAction" class="action">
            <i @click='toggleCollect(img)' :class="['el-icon-star-off' ,img.is_collected ? 'isred':'']"></i>
            <i @click='removeImageById(img.id)' class="el-icon-delete"></i>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.per_page" layout="total, prev, pager, next" background :total="totalCount">
    </el-pagination>

    <el-dialog title="添加素材" :visible.sync="dialogVisible">
      <el-upload drag name="image" :show-file-list='false' action="http://ttapi.research.itcast.cn/mp/v1_0/user/images" :on-success="onSuccess" :on-error="onError" :headers="uploadHeaders" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>
  </div>
</template>
<script>
import { getImages, collectImage, deleteImage } from '@/api/user.js'
export default {
  props: {
    isShowAction: {
      type: Boolean,
      default: true
    },
    isShowAdd: {
      type: Boolean,
      default: true
    },
    isShowSelected: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const user = JSON.parse(window.sessionStorage.getItem('user'))
    return {
      queryInfo: {
        collect: false,
        per_page: 12,
        page: 1
      },
      imageList: [],
      totalCount: 0,
      imagloading: false,
      selected: null,
      uploadHeaders: {
        Authorization: `Bearer ${user.token}`
      },
      dialogVisible: false
    }
  },
  created() {
    this.loadImage()
  },
  methods: {
    loadImage() {
      this.imagloading = true
      getImages(this.queryInfo)
        .then(res => {
          this.imageList = res.data.data.results
          this.totalCount = res.data.data.total_count
          this.imagloading = false
        })
        .catch(() => {
          this.$message.error('或许图片列表失败！')
          this.imagloading = false
        })
    },
    handleCurrentChange(page) {
      this.queryInfo.page = page
      this.loadImage()
    },
    radioChange() {
      this.queryInfo.page = 1
      this.loadImage()
    },
    toggleCollect(img) {
      collectImage(img.id, !img.is_collected)
        .then(() => {
          img.is_collected = !img.is_collected
          this.$message.success(img.is_collected ? '添加收藏成功！' : '取消收藏成功！')
          this.loadImage()
        })
        .catch(() => {
          this.$message.error('操作失败！')
        })
    },
    removeImageById(id) {
      deleteImage(id)
        .then(() => {
          this.$message.success('删除图片成功！')
          this.loadImage()
        })
        .catch(() => {
          this.$message.error('删除图片失败！')
        })
    },
    onSuccess() {
      this.$message.success('图片上传成功！')
      this.dialogVisible = false
      this.loadImage()
    },
    onError() {
      this.$message.error('图片上传失败！，请重试')
    }
  }
}
</script>

<style scoped>
.header-btn {
  display: flex;
  justify-content: space-between;
}
.imgitem {
  position: relative;
  margin-top: 15px;
  width: 120px;
  height: 120px;
  border: 1px solid #ccc;
}
.action {
  position: absolute;
  display: flex;
  justify-content: space-evenly;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.3);
}
.action i {
  font-size: 20px;
  color: #fff;
  line-height: 36px;
}
.action .isred {
  color: red;
}
.el-image {
  width: 100%;
  height: 100%;
}
.selected {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) url('./selected.png') no-repeat 50%/50px;
}
.el-pagination {
  margin-top: 15px;
}
.el-dialog__body > div {
  text-align: center;
}
</style>
